import React, { Component } from 'react'
import Title from './Title';
import Subscribe from './Subscribe';
import Catalogue from './Catalogue';
import { get } from '../../Lib/Http';
import { Spin } from 'antd';
import apiUrl from '../../Config/web';

class Details extends Component {

    constructor(props){
        super(props);

        this.state ={};


        props.history.push({
            pathname:props.location.pathname
        });

    }

    
    componentDidMount(){

        let that = this;
        
        let parmasData = this.props.match;


        let _b_url = that.props.history.location.pathname;
        window._hmt.push(['_trackPageview', _b_url]);

        get(apiUrl.detail, {'id':parmasData.params.bookId}, 
        function(response){
            if(response.status === 200){
                that.setState({
                    'data':response.data,
                    'buy':response.data.buy,
                });
            }
        }, function(error){
            console.log(error);
        });

    }

    setBuyStatus(e){
        this.setState({
           'buy':1
       });
    }

    render() {

        if(this.state.data === undefined){
            return (<Spin tip="Loading..." className="home-loding" size="large" />);
        } 
        else{

            let width = window.innerWidth;
            let data = this.state.data;

            data.price = parseInt(data.price);
            data.vip_price = parseInt(data.vip_price);

            return (
                <div className="root background-white">
                    <Title name={data.name} img={data.img} price={data.price} vipPrice={data.vip_price} />
                    <Subscribe setBuy={this.setBuyStatus.bind(this)} price={data.price} vipPrice={data.vip_price}  history={this.props.history} text={data.buy} url={data.buy_location} />
                    <Catalogue price={data.price} buy={this.state.buy} width={width} explain={data.explain} chapter={data.chapter} />
                </div>
            );
        }

        
    }
}

export default Details;